<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/d3/d3.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="frontEnd" ng-controller="frontEndCtrl" class="container-fluid">
     <div id="tooltip" class="hidden">
        <p><strong id="name"></strong></p>
        <p><span id="desc"></span></p>
     </div>
     <h2 class="title">
         <a href="https://github.com/foru17/front-end-collect" target="_blank">Front-end-collect</a> Chart
     </h2>

     <div class="row">
         <form role="form" class="col-sm-6">
             <label class="radio-inline">
                 <input type="radio" ng-model="type" value="tree"> Tree
             </label>
             <label class="radio-inline">
                 <input type="radio" ng-model="type" value="cluster"> Cluster
             </label>
             <label class="radio-inline">
                 <input type="range" ng-model="rotate" min="0" max="60" ng-disabled="type !== 'cluster'">
             </label>
             <label class="radio-inline">
                 <span>{{ rotate * 6 }}</span>
             </label>
         </form>
     </div>
     <div class="row">
        <front-end-chart></front-end-chart>
     </div>
  </body>
</html>
